<template>
	<view class="content">
		<view v-if="navIndex==0">
			<view class="card p15">
				<view class="flex">
					<image class="top-icon" src="../../static/icon/shijian1.png" mode="aspectFill"></image>
					<view class="f14"><text>{{clock}}</text></view>
				</view>
				<view class="line">
				</view>
				<view class="flex">
					<image class="top-icon" src="../../static/icon/dizhi1.png" mode="aspectFill"></image>
					<view class="f14 row1"><text>{{address}}</text></view>
				</view>
			</view>
			<view style="height: 900rpx;background-color: #f5f5f5">
				<map class="map" :latitude="map.latitude" :longitude="map.longitude" :markers="map.covers"
					:scale="map.scale" :polyline="map.polyline"></map>
			</view>
			<view class="card p15">
				<view class="line">
					{{lsrw}}
				</view>
				<view class=" flex-center">
					<view class="starts" @click="xuncha">开始巡边</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="head-nav">
				<view style="text-align: center;" class="activite" @click="checkIndex(0)">
					<image class="botimg" src="/static/icon/dingdianxuncha.png" mode="aspectFill"></image>
					<view class="">返回</view>
				</view>
				<view style="text-align: center;" class="activite" @click="bj(0)">
					<image class="botimg" src="/static/icon/bj.png" mode="aspectFill"></image>
					<view class="">一键报警</view>
				</view>
				<view style="text-align: center;" class="activite" @click="checkIndex(1)">
					<image style="width: 54rpx;height: 54rpx;" class="botimg" src="/static/icon/jilu.png"
						mode="aspectFill"></image>
					<view class="">巡边记录</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	const aMapHelper = uni.requireNativePlugin("SLY-AMapHelper");
	import QQMapWX from '../../libs/qqmap-wx-jssdk/qqmap-wx-jssdk.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import myIssue from '@/components/myIssue.vue';
	import helper from '../../common/helper.js';
	import api from '../../common/api.js';
	export default {
		components: {
			uniPopup,
			myIssue
		},
		data() {
			return {
				map: {
					latitude: '39.9',
					longitude: '116.4',
					covers: [],
					scale: 16
				},
				lsrw: '',
				qqmapsdk: {},
				address: '',
				time: '',
				clock: '',
				navIndex: 0,
				select: '',
				isdingwei: 0,
				options1: [],
				set:[],
			}
		},
		mounted() {
			let _this = this;
			setInterval(function() {
				_this.clock = _this.time1();
			}, 1000);
		},
		onShow() {
			var _this = this;
			// 保持屏幕常亮
			
		},
		//退出页面后停止定位
		onBackPress() {
			aMapHelper.stopLocation();
		},
		onLoad() {
			this.time1();
			this.onl();
			this.quyu();
			uni.setKeepScreenOn({
				keepScreenOn: true
			});
			this.onceLocation();
			api.getSetting().then(res=>{
				console.log(res)
				this.set=res.data
			})
		},
		methods: {
			async onl() {
				var _this = this;
				//获取临时任务点
				api.linshi().then(res => {
					for (var i = 0; i < res.data.length; i++) {
						_this.lsrw = '请巡边相应红色点位'
						_this.map.covers.push({
							latitude: res.data[i].latitude,
							longitude: res.data[i].longitude,
							width: 40,
							iconPath: '../../static/rw.png'
						});
					}
					console.log('covers', _this.map.covers)
				});

			},
			//巡边区域
			async quyu() {
				// var _this = this;
				// let res = await api.quyu();
				// _this.options1 = res.data; 
			},
			async xuncha() {
				if (this.isdingwei != 1) {
					uni.showToast({
						icon: 'none',
						title: '定位中'
					})
					return;
				}
				uni.setStorageSync('map1', this.map);
				var _this = this;
				var res = await api.start_xun({
					lat: _this.map.latitude,
					lng: _this.map.longitude,
					// quyu:_this.select
				});
				console.log('xuncha',res)
				if (res.code == 1) {
					uni.navigateTo({
						url: '/pages/taxiService/insperction?reportid=' + res.data
					})
				}
			},
			//连续定位
			trackLocation() {
				let _this = this;
				this.result = '';
				let count = 0;
				aMapHelper.trackLocation({
					intervalTime: 3000, //定位间隔时间
					spacing: 0, //有效移动距离，超过大于等于该值才会回调
					notificationTitle: "自定义Title",
					notificationContent: "自定义Content",
					coordType: this.coordType
				}, (res) => {
					console.log("定位结果", res);
					_this.myLng = res.longitude;
					_this.isdingwei = 1;
					_this.myLat = res.latitude;
					_this.address = res.address;
					_this.map.longitude = res.longitude;
					_this.map.latitude = res.latitude;
					_this.map.covers.push({
						latitude: res.latitude,
						longitude: res.longitude,
						width: 40,
						iconPath: '../../static/r.png'
					});
					//调试时请以控制台日志是否持续打印为准，息屏后view页面可能不会更新result结果
					console.log("【持续定位结果】", `时间：${res.formatTime},坐标：${res.longitude},${res.latitude}`);
					if (res.errorCode == 0) {

					} else if (res.errorCode == 12) {
						let deniedPermissionAndNoAsk = res.deniedPermissionAndNoAsk;
						uni.showModal({
							title: '提示',
							content: res.errorInfo,
							success: (res) => {
								if (res.confirm && deniedPermissionAndNoAsk) {
									aMapHelper.openSettingPage();
								}
							}
						})
					}
				})
			},
			//单次定位
			onceLocation() {
				let _this = this;
				uni.showLoading({
					title: '定位中...'
				})
				this.result = ''
				aMapHelper.getLocation({}, (res) => {
					uni.hideLoading();
					console.log("定位结果", res);
					if (res.errorCode == 0) {
						_this.myLng = res.longitude;
						_this.isdingwei = 1;
						_this.myLat = res.latitude;
						_this.address = res.address;
						_this.map.longitude = res.longitude;
						_this.map.latitude = res.latitude;
						_this.map.covers.push({
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: '../../static/r.png'
						});
					} else if (res.errorCode == 12) { //用户拒绝定位权限
						//当用户选择了“拒绝且不再询问”时，应用无法再弹出权限申请框，必须引导用户前往设置页面手动开启。
						let deniedPermissionAndNoAsk = res.deniedPermissionAndNoAsk;
						uni.showModal({
							title: '提示',
							content: res.errorInfo,
							success: (res) => {
								if (res.confirm && deniedPermissionAndNoAsk) {
									//打开设置页面
									aMapHelper.openSettingPage();
								}
							}
						})
					}

				})
			},
			//当前时间
			time1() {
				let date = new Date();
				// 获取当前月份
				var nowMonth = date.getMonth() + 1;
				// 获取当前是几号
				let strDate = date.getDate();
				// 添加分隔符“-”
				var seperator = "-";
				// 对月份进行处理，1-9月在前面添加一个“0”
				if (nowMonth >= 1 && nowMonth <= 9) {
					nowMonth = "0" + nowMonth;
				}
				// 对天进行处理，1-9号在前面添加一个“0”
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				//获取小时
				let strHours = date.getHours();
				//获取分钟
				let strMinu = date.getMinutes();
				//获取秒
				let strMill = date.getSeconds();
				// 对小时进行处理，1-9月在前面添加一个“0”
				if (strHours >= 1 && strHours <= 9) {
					strHours = "0" + strHours;
				}
				// 对分钟进行处理，1-9号在前面添加一个“0”
				if (strMinu >= 0 && strMinu <= 9) {
					strMinu = "0" + strMinu;
				}
				// 对秒进行处理，1-9号在前面添加一个“0”
				if (strMill >= 0 && strMill <= 9) {
					strMill = "0" + strMill;
				}
				// 添加分隔符“:”
				var seperator1 = ":";
				// 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期
				return date.getFullYear() + seperator + nowMonth + seperator + strDate + ' ' + strHours + seperator1 +
					strMinu + seperator1 + strMill;
			},
			checkIndex(index) {
				if (index == 0) {
					uni.navigateBack({

					})
				} else {
					uni.navigateTo({
						url: '/pages/taxiService/record'
					})
				}

			},
			bj(e) {
				uni.makePhoneCall({
					phoneNumber:this.set.phone
				})
				console.log('select = ', this.select)
			},
			change(e) {
				console.log('select = ', this.select)
			},

		}
	}
</script>

<style scoped>
	uni-map {
		width: 100%;
		height: 900rpx;
	}

	.p15 {
		padding: 30rpx;
	}

	.head-nav {
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
	}

	.activite {
		color: #4DA9EC;
	}

	.head-nav>view {
		padding-bottom: 10rpx;
	}

	.top-icon {
		height: 42rpx;
		width: 42rpx;
		margin-right: 12rpx;
	}

	.line {
		width: 100%;
		height: 2rpx;
		background-color: #f5f5f5;
		margin: 10rpx 0;
	}

	.startbig {
		/* height: 200rpx; */
		width: 200rpx;
		border-radius: 50%;
		background-color: #FBC460;
		color: #ffffff;
		position: relative;
		margin: 20% auto;
	}

	.starts {
		height: 200rpx;
		width: 200rpx;
		border-radius: 50%;
		background-color: #FBC460;
		color: #ffffff;
		font-size: 30rpx;
		border: 4rpx solid #f5f5f5;
		text-align: center;
		line-height: 192rpx;
		margin: auto;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		right: 0;
		padding: 0 18%;
	}

	.botimg {
		width: 60rpx;
		height: 60rpx;
	}

	page {
		background-color: #ffffff;
	}
</style>